<template>
  <div>
    <BaseModal fullscreen @onSubmit="onSubmit" @onClose="onClose" :show="show" title="编辑课程信息">
      <div class="demo-input-suffix">
        <span class="form-input-label">课程名称：</span>
        <el-input v-model="data.course_name" required placeholder="请输入课程名称"></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">课程简介：</span>
        <el-input type="textarea" v-model="data.describe" placeholder="请输入简介"></el-input>
      </div>
      <div class="demo-input-suffix" style="margin-top: 15px;">
        <span class="form-input-label">课程封面：</span>
        <img v-if="attach_url" :src="attach_url" width="100" height="100" />
        <span class="on-up-file" @click="onUpFile"> + </span>
        <input type="file" @change="onFileChange" accept="image/*" style="width:0px" id="file" />
      </div>
      <div style="margin-top: 15px;" class="demo-input-suffix">
        <span class="form-input-label">课程状态：</span>
        <el-select v-model="data.status" placeholder="请选择课程状态">
          <el-option
            v-for="item in course_status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">理论学时：</span>
        <el-input  type="number" min="1" max="300" required  v-model="data.theo_hours" placeholder="请输入理论课时"></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">实践学时：</span>
        <el-input  type="number" min="0" max="100"  v-model="data.prac_hours" placeholder="请输入实践学时"></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">学分：</span>
        <el-input type="number" min="1" max="100" v-model="data.credit" placeholder="请输入学分"></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">容量：</span>
        <el-checkbox v-model="checked_capacity"></el-checkbox>
        <el-input type="number" min="1" max="10000" :disabled="!checked_capacity" v-model="data.capacity" placeholder="请输入课程容量"></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">选课码：</span>
        <el-checkbox v-model="checked_choiced_code"></el-checkbox>
        <el-input type="text" :disabled="!checked_choiced_code" v-model="data.choice_code"></el-input>
      </div>
      
      <CourseTree v-if="obj" :course_id="data.id" :chapters="chapters" @fetchChapter="fetchChapter" />
 
    </BaseModal>
  </div>
</template>
<script>
import modalClose from "@/mixins/modalClose";
import CreateFilter from "@/mixins/CreateFilter";
import CourseTree from '@/components/CourseTree'
import { courseModel, _upload } from "@/api/models";
import { Message } from "element-ui";
import {makeRandomStr} from '@/utils/utils.js'
export default {
  mixins: [modalClose, CreateFilter],
  components: {CourseTree},
  data() {
    return {
      data: {
        id: null,
        course_name: null,
        describe: null,
        avatar_id: null,
        theo_hours: 0,
        prac_hours: 0,
        credit: 0,
        capacity: 60,
        choice_code: ''
      },
      checked_choiced_code: false,
      attach_url: null,
      showEditChapter: false,
      chapters: [],
      activeNode: {},
      checked_capacity: false
    };
  },
  props: {
    obj: {
      type: Object,
      default: null
    }
  },
  watch: {
    obj: function(value) {
      if(value) {
        courseModel.item(value.course_id, res => {
          this.data = res.data;
          this.checked_choiced_code = res.data.choice_code.length == 4
          this.checked_capacity = res.data.capacity > 0
          this.fetchChapter();
        })
      }else{
        this.data = {}
        this.checked_choiced_code = false
      }
    },
    checked_choiced_code: function(value) {
      if (value) {
        this.data.choice_code = makeRandomStr(4)
      }else {
        this.data.choice_code = ''
      }
    }
  },
  mounted() {},
  methods: {
   
    getItem() {
      courseModel.item(this.id, res => {
        this.data = res.data;
        this.fetchChapter();
      });
    },
    fetchChapter() {
      courseModel.chapters(this.data.id, res => {
        this.chapters = res.data
      });
    },
    onSubmit() {
      let d = this.data;
      console.log('onsubmit d', d)
      if (
        !d.course_name ||
        !d.describe ||
        !d.status
      ) {
        return Message.warning("请填完整信息");
      }
      if (d.credit < 0 )
      if (this.checked_capacity && this.capacity ==0 ) {
        return Message.warning("请填写课程容量");
      }
      if (!this.checked_capacity) {
        d.capacity = 0;
      }
      if(d.id) {
        courseModel.update(d.id, d, res=> {
          Message.success(res.message);
          this.onClose();
          this.$emit('afterSubmit');
        }, err => {
          Message.warning(err.message)
        })
      }else{
        courseModel.create(d, res => {
          Message.success(res.message)
          this.onClose();
          this.$emit('afterSubmit');
        })
      }
    },

    onClose() {
      this.$emit("onClose");
    },
    onUpFile() {
      document.getElementById('file').click()
    },
    onFileChange(e) {
      console.log(e, _upload)
      let _this = this
      _upload(e.target.files[0], res => {
        console.log(res)
        _this.data.avatar_id = res.data.id
        _this.attach_url = res.data.attach_url
      })
    }
  }
};
</script>
<style scoped lang="scss">
  .el-textarea{
    margin-left: 20px;
    width: 80%;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-tree-div{
    width: 50%;
    margin-left: 100px;
    border: 1px solid #cccccc;
    padding: 20px;
  }
  .tree-input > input {
    border: none;
    background: rgba(0, 0, 0, 0);
  }
</style>